@import "../common/vars.scss";
@import "../mixins/mixins.scss";
//主要菜单
@include create(menu){
    list-style: none;
    position: relative;
    margin: 0;
    padding-left: 0;
    background-color: $color-white;
    @include m(item){
        @include m(title){
            display: block;
            height: $menu-height;
            line-height: $menu-height;
            font-size: $font-size-base;
            color: $color-text-primary;
            list-style: none;
            padding: 0 20px;
            cursor: pointer;
            position: relative;
            transition: border-color .3s,background-color .3s,color .3s;
            box-sizing: border-box;
            white-space: nowrap;
            &:hover{
                outline: none;
                background-color: $menu-item-hover-background;
            }
        }
        @include when(active){
            .aiui-menu-item-title{
                color: $color-primary-light-1;
            }
        }
    }
    [class^=aiui-icon-] {
        vertical-align: middle;
        width: $menu-icon-width;
        text-align: center;
        font-size: $menu-icon-size;
    }
}
//子节点
@include create(submenu){
    list-style: none;
    margin: 0;
    padding-left: 0;
    @include m(title){
        height: $menu-height;
        line-height: $menu-height;
        font-size: $font-size-base;
        color: $color-text-primary;
        padding: 0 20px;
        list-style: none;
        cursor: pointer;
        position: relative;
        transition: border-color .3s,background-color .3s,color .3s;
        box-sizing: border-box;
        white-space: nowrap;
        &:hover{
            background-color: $menu-item-hover-background;
        }
        @include when(active){
            color: $color-primary-light-1;
        }
    }
    *{
        vertical-align: middle;
    }
    [class^=aiui-icon-] {
        vertical-align: middle;
        width: $menu-icon-width!important;
        text-align: center;
        font-size: $menu-icon-size;
        -webkit-transition: font-size .3s;
        transition: font-size .3s;
    }
    @include m(icon-arrow){
        position: absolute;
        top: 50%;
        right: 20px;
        margin-top: -7px;
        transition: transform .3s;
        font-size: 12px;
    }
    @include when(open){
        &>.aiui-submenu-title{
            @include create(submenu-icon-arrow){
                transform: rotate(180deg);
            }
        }
    }
}
//折叠菜单
@include create(menu-collapse){
    width: $menu-collapse-width;
    
}